<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back />
        <h2>资料上传</h2>
      </div>
      <div class="info-item">
        <div class="info-title">
          <img src="/@/assets/images/detail_title.png" alt="" />
          土地承包合同、证明
        </div>
        <div class="info-content">
          <h2>图片上传</h2>
          <div class="files">
            <div class="upload">
              <p>只能上传PNG/JPEG 文件 且大小不超过10M</p>
              <a-button class="submit upload-btn">
                <input type="file" placeholder="选择文件" />
                选择文件
              </a-button>
            </div>
            <div class="res">
              <div class="file-mask">
                
              </div>
            </div>
          </div>
          <h2>PDF文件上传</h2>
          <div class="files">
            <div class="upload">
              <p>只能上传pdf文件 且大小不超过100M</p>
              <a-button class="submit upload-btn">
                <input type="file" placeholder="选择文件" />
                选择文件
              </a-button>
            </div>
          </div>
          <div class="btns">
            <a-button class="cancel">清空当前页面</a-button>
            <a-button class="submit">确定</a-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, ref, onBeforeMount, onMounted } from 'vue';
  import Back from '/@/components/go-back/index.vue';
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    display: flex;
    flex-direction: column;
    padding: 20rem;
    position: relative;

    .info-content {
      padding: 0 0 !important;
      h2 {
        margin-top: 44rem;
        margin-bottom: 24rem;
      }
      .files {
        display: flex;
        .upload {
          width: 326rem;
          height: 235rem;
          background: #eeeeee;
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 63rem 0 35rem;
          box-sizing: border-box;
          justify-content: space-between;
          p {
            width: 168rem;
            height: 35rem;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 15rem;
            color: #9d9d9d;
            line-height: 20rem;
            text-align: center;
          }
          .upload-btn {
            width: 270rem;
            height: 42rem;
            background: #f55d4c !important;
            border-radius: 5rem;
            position: relative;
            color: 18rem;
            margin: 0;
            input[type='file'] {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
              cursor: pointer;
            }
          }
        }
        .res {
          width: 235rem;
          height: 235rem;
          background: #f2f1f1;
          padding: 15rem;
          box-sizing: border-box;
          margin-left: 29rem;
        }
      }
    }

    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 20rem;
      .cancel {
        width: 270rem;
        height: 42rem;
        border-radius: 5rem;
      }
      .submit {
        width: 270rem;
        height: 42rem;
        background: #f55d4c !important;
        border-radius: 5rem;
      }
    }
  }
</style>
